/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {createBottomTabNavigator, createStackNavigator, createTabNavigator, TabBarBottom} from 'react-navigation'
import GoodsDetail from "./GoodsDetail";
import home from "./Home";
import home2 from "./Home2";
import more from "./more";
import BetRenderIcon from './image/image_home_icon/icon_quiz_unselected.png';
import BetPressedIcon from './image/image_home_icon/icon_quiz_selected.png';
import EventRenderIcon from './image/image_home_icon/icon_event_unselected.png';
import EventPressedIcon from './image/image_home_icon/icon_event_selected.png';
import {
    Image,
    StyleSheet
} from 'react-native';
import px2dp from "./px2dp";
import AnimationExample from "./js/anim/AnimationExample";
import RnConnectWithNative from "./js/RnConnectWithNative";
import ImagePicker from "./js/ImagePicker";
import Communication from "./js/Communication";
import web from "./js/web";
import test from "./js/test";
import {bottomTabNavigator} from "./js/navigation/navigation";
import {switchNavigator} from "./js/navigation/Navigation2";
import AnimatedDemo from "./js/anim/AnimatedDemo";
import ScrollableTab from "./js/navigation/ScrollableTab";
import ScrollableTab2 from "./js/navigation/ScrollableTab2";
import VpTest from "./js/VpTest";
import TestAntDesigin from "./js/antDesign/TestAntDesigin";
import TestAntDesiginTabBar from "./js/antDesign/TestAntDesiginTabBar";
import TestAntDesiginButton from "./js/antDesign/TestAntDesiginButton";
import TestAntDesiginCheckBox from "./js/antDesign/TestAntDesiginCheckBox";
import TestAntDesignDatePicker from "./js/antDesign/TestAntDesignDatePicker";
import TestAntDesignInputItem from "./js/antDesign/TestAntDesignInputItem";
import TestAntDesignActionSheet from "./js/antDesign/TestAntDesignActionSheet";
import {TestAntDesignModal} from "./js/antDesign/TestAntDesignModal";
import {TestAntDesignToast} from "./js/antDesign/TestAntDesignToast";
const styles = StyleSheet.create({
    tabIcon: {
        height: px2dp(60),
        width: px2dp(60),
    }
});
const TabRouteConfigs = {
    home: {
        screen: home,
        navigationOptions: ({navigation}) => ({
            title: '首页',

            tabBarIcon: ({focused, tintColor}) => (
                <Image
                    source={focused ? BetPressedIcon : BetRenderIcon}
                    style={styles.tabIcon}
                />
            ),
        }),
    },
    more: {
        screen: more,
        navigationOptions: ({navigation}) => ({
            title: '更多',
            tabBarIcon: ({focused, tintColor}) => (
                <Image
                    source={focused ? EventPressedIcon : EventRenderIcon}
                    style={styles.tabIcon}
                />
            ),
        }),
    },

};
const TabNavigatorConfigs = {
    initialRouteName: 'home',
    // tabBarComponent: TabBarComponent,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    tabBarOptions: {
        activeTintColor: '#004DCF', // 文字和图片选中颜色
        inactiveTintColor: '#B9B9B9', // 文字和图片默认颜色
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        indicatorStyle: {height: 10, top: -45}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
        style: {
            backgroundColor: '#FFFFFF', // TabBar 背景色
            borderWidth: 0,
            height: px2dp(98),
        },
        labelStyle: {
            fontSize: px2dp(24), // 文字大小
            lineHeight: px2dp(24),
            margin: 0
        },
        tabStyle: {
            backgroundColor: '#FFFFFF', // TabBar 背景色
            flex: 1
        }
    },
};
const TabBarNavigator = createBottomTabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const RootStack = createStackNavigator({
        tabBar: {
            screen: TabBarNavigator,
            navigationOptions: {
                header: null
            }
        },
        // home: {
        //     screen: home,
        //     navigationOptions: {
        //         header: null
        //     }
        // },
        home2: {
            screen: home2,
            navigationOptions: {
                header: null
            }
        },

        goodsDetail: {
            screen: GoodsDetail,
            navigationOptions: {
                header: null
            }
        },
        animationExample: {
            screen: AnimationExample,
            navigationOptions: {
                header: null
            }
        },
        rnConnectWithNative: {
            screen: RnConnectWithNative,
            navigationOptions: {
                header: null
            }
        },
        imagePicker: {
            screen: ImagePicker,
            navigationOptions: {
                header: null
            }
        },
        communication: {
            screen: Communication,
            navigationOptions: {
                header: null
            }
        },
        web: {
            screen: web,
            navigationOptions: {
                header: null
            }
        },
        test: {
            screen: test,
            navigationOptions: {
                header: null
            }
        },
        navigation: {
            screen: bottomTabNavigator,
            navigationOptions: {
                header: null
            }
        },
        switchNavigator: {
            screen: switchNavigator,
            navigationOptions: {
                header: null
            }
        },
        AnimatedDemo: {
            screen: AnimatedDemo,
            navigationOptions: {
                header: null
            }
        },
        ScrollableTab: {
            screen: ScrollableTab,
            navigationOptions: {
                header: null
            }
        },
        ScrollableTab2: {
            screen: ScrollableTab2,
            navigationOptions: {
                header: null
            }
        },
        vpTest: {
            screen: VpTest,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesign: {
            screen: TestAntDesigin,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesiginTabBar: {
            screen: TestAntDesiginTabBar,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesiginButton: {
            screen: TestAntDesiginButton,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesiginCheckBox: {
            screen: TestAntDesiginCheckBox,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesignDatePicker: {
            screen: TestAntDesignDatePicker,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesignInputItem: {
            screen: TestAntDesignInputItem,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesignActionSheet: {
            screen: TestAntDesignActionSheet,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesignModal: {
            screen: TestAntDesignModal,
            navigationOptions: {
                header: null
            }
        },
        TestAntDesignToast: {
            screen: TestAntDesignToast,
            navigationOptions: {
                header: null
            }
        },
        // more: {
        //     screen: more,
        //     navigationOptions: {
        //         header: null
        //     }
        // }
    },
    {
        initialRouteName: 'tabBar',
        headerMode: 'screen',
        mode: 'card'
    });
export default class App extends Component {
    render() {                            //将Navigation作为根路径导出
        return <RootStack/>;
    }
}
